<template>
  <el-card class="main-process-card">
    <div class="main-process-header">
      <span class="main-process-title">主程序控制</span>
      <el-button size="small" @click="refreshStatus" icon="el-icon-refresh" circle></el-button>
    </div>
    <div class="main-process-status">
      状态：<span :style="{color: statusColor}" class="main-process-status-text">{{ statusText }}</span>
    </div>
    <div class="main-process-actions">
      <el-button type="success" @click="startProcess" :loading="loadingStart">启动</el-button>
      <el-button type="warning" @click="stopProcess" :loading="loadingStop">停止</el-button>
      <el-button type="primary" @click="restartProcess" :loading="loadingRestart">重启</el-button>
    </div>
    <div class="main-process-output">
      <div class="output-area-wrap">
        <el-input
          type="textarea"
          :rows="8"
          v-model="output"
          readonly
          class="main-process-output-area"
        />
        <el-button size="small" @click="copyOutput" class="copy-output-btn">复制输出</el-button>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'

const statusText = ref('未知')
const statusColor = ref('#aaa')
const output = ref('')
const loadingStart = ref(false)
const loadingStop = ref(false)
const loadingRestart = ref(false)

function fetchStatus() {
  fetch('/api/status')
    .then(res => res.json())
    .then(data => {
      statusText.value = data.status || '未知'
      statusColor.value = data.status === '运行中' ? '#67c23a' : (data.status === '已停止' ? '#f56c6c' : '#aaa')
      output.value = data.output || ''
    })
}
function refreshStatus() {
  fetchStatus()
  ElMessage.success('已刷新主程序状态')
}
function startProcess() {
  loadingStart.value = true
  fetch('/api/start', {method: 'POST'})
    .then(() => {
      setTimeout(fetchStatus, 1000)
      ElMessage.success('主程序已启动')
    })
    .finally(() => loadingStart.value = false)
}
function stopProcess() {
  loadingStop.value = true
  fetch('/api/stop', {method: 'POST'})
    .then(() => {
      setTimeout(fetchStatus, 1000)
      ElMessage.success('主程序已停止')
    })
    .finally(() => loadingStop.value = false)
}
function restartProcess() {
  loadingRestart.value = true
  fetch('/api/restart', {method: 'POST'})
    .then(() => {
      setTimeout(fetchStatus, 1500)
      ElMessage.success('主程序已重启')
    })
    .finally(() => loadingRestart.value = false)
}
function copyOutput() {
  navigator.clipboard.writeText(output.value)
  ElMessage.success('主程序输出已复制')
}
let statusTimer = null
onMounted(() => {
  fetchStatus()
  statusTimer = setInterval(fetchStatus, 5000)
})
onUnmounted(() => {
  if (statusTimer) clearInterval(statusTimer)
  statusTimer = null
})
</script>
<style scoped>
  .main-process-card {
    border-radius: 8px;
    min-height: 700px;
    margin-bottom: 32px;
    box-shadow: 0 4px 24px #ffe0f7;
    background: #fff6fa;
    border: none;
    padding: 48px 16px 48px 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .main-process-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  .main-process-title {
    font-size: 2rem;
    font-weight: bold;
    color: #b48ad6;
  }
  .main-process-status {
    margin-bottom: 24px;
    font-size: 1.5rem;
  }
  .main-process-status-text {
    font-weight: bold;
  }
  .main-process-actions {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
  }
  .main-process-output {
    margin-top: 16px;
  }
  .output-area-wrap {
    position: relative;
    width: 100%;
  }
  .copy-output-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 4px 14px;
    font-size: 0.98rem;
    border-radius: 8px;
    background: #f8e1f4;
    color: #b48ad6;
    box-shadow: 0 2px 8px #e0c6f7;
    transition: box-shadow 0.2s, background 0.2s;
  }
  .copy-output-btn:hover {
    background: #e0f7fa;
    color: #7c5fa3;
    box-shadow: 0 4px 16px #b48ad6;
  }
  .main-process-output-area {
    width: 100%;
    font-size: 1.1rem;
    background: #f8f6ff;
    border-radius: 6px;
    min-height: 80px;
    resize: vertical;
  }
</style>
